<template>
  <div>
    <div v-if="starMsg.guodu">
      <spinner></spinner>
    </div>
    <div v-if="!starMsg.guodu && starMsg.data">
      <title-bar :title="starMsg.data.name" @click="goBack"/>
      <div class="infoPanel clearfix">
        <div class="left">
          <img :src="starMsg.data.avatars.large">
        </div>
        <div class="right">
          <h3>影星资料</h3>
          <p>{{starMsg.data.name}}</p>
          <p>{{starMsg.data.name_en}}</p>
          <p>{{starMsg.data.gender}}</p>
        </div>
      </div>
      <h3 class="works">代表作品</h3>
      <div class="work clearfix" v-for="work in starMsg.data.works">
        <div class="work-photo">
          <img :src="work.subject.images.small">
        </div>
        <div class="work-info">
          <p>{{work.subject.title}}</p>
          <p>{{work.roles.join(',')}}</p>
          <p>{{work.subject.year}}</p>
          <p><star :score="work.subject.rating.average"></star></p>
          <p>{{work.subject.rating.average}}分{{work.subject.collect_count}}人评价</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import titleBar from './TitleBar/title-bar.vue'
  import loadData from '../assets/loadData'
  import spinner from './spinner/spinner.vue'
  import star from './v-star/star.vue'

  export default {
    components: {
      'title-bar': titleBar,
      'spinner': spinner,
      'star': star
    },
    data () {
      return {
        starMsg: {
          guodu: false,
          error: '',
          data: null
        }
      }
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      }
    },
    mounted () {
      let url = 'https://api.douban.com/v2/movie/celebrity/' + this.$route.params.id
      loadData(url, this.starMsg)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  *{
    box-sizing: border-box;
  }
  .infoPanel{
    background-color: #b4b1b1;
    overflow: hidden;

    $left-width: 170px;
    $padding: 10px;


    position: relative;

    .left{
      float: left;
      width: $left-width;
      padding: $padding;

      img{
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: auto;
      }
    }

    .right{
      position: absolute;
      left: $left-width + $padding;
      right: $padding;
      bottom: $padding;


      color: #eeeeee;

      h3{
        margin: 5px 0;
        font-size: 25px;
      }

      p{
        margin: 2px 0;
        font-size: 20px;
      }
    }
  }


  h3.works{
    font-size: 20px;
    margin: 10px 0;
  }

  .work{
    overflow: hidden;

    .work-photo{
      width: 50px;
      height: 70px;
      float: left;
      overflow: hidden;
      margin-bottom: -10000px;
      padding-bottom: 10000px;

      img{
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: auto;
      }
    }

    .work-info{
      margin-left: 60px;

      float: left;
      overflow: hidden;
      margin-bottom: -10000px;
      padding-bottom: 10000px;
    }

    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;


  }
</style>
